<template>
  <picker v-if="type === 'city'" class="flex-item" mode="multiSelector" :disabled="disabled" :range="pickerRange" @change="change" @columnchange="columnchange">
    <view class="form-item flex-row align-center justify-end">
      <text class="text-30" :class="['color-t' + (cityName || showType==='detail' ? 1 : 3)]">{{ cityName || (showType === 'detail' ? '暂无' : placeholder) }}</text>
    </view>
  </picker>
  <picker v-else class="flex-item" mode="selector" :range="pickerRange" :disabled="disabled" range-key="label" @change="change">
    <view class="form-item flex-row align-center justify-end">
      <text class="text-30" :class="['color-t' + (cityName || (showType==='detail') ? 1 : 3)]">{{ cityName || (showType === 'detail' ? '暂无' : placeholder) }}</text>
    </view>
  </picker>
</template>

<script>
import cityJson from '@/common/area.json'
export default {
  props: {
    // 城市value
    value: {
      type: Array,
      default: () => []
    },
    placeholder: {
      type: String,
      default: '请选择部署城市'
    },
    type: {
      type: String,
      default: 'city'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    showType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      province: [],
      city: [],
      provinceIndex: -1,
      cityIndex: -1
    }
  },
  computed: {
    pickerRange() {
      if (this.type === 'city') {
        return [this.province, this.city]
      } else {
        return cityJson.map(item => {
          return {
            label: item.label,
            value: item.value
          }
        })
      }
    },
    cityName() {
      if (this.type === 'city') {
        if (this.provinceIndex >= 0 && this.cityIndex >= 0) {
          return cityJson[this.provinceIndex].children[this.cityIndex].label
        } else {
          return ''
        }
      } else {
        if (this.provinceIndex >= 0) {
          return this.pickerRange[this.provinceIndex].label
        } else {
          return ''
        }
      }
    }
  },
  watch: {
    value() {
      this.init()
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      if (this.type === 'city') {
        let provinceIndex = -1
        let cityIndex = -1

        // 设置初始值
        if (this.value && this.value.length === 2 && this.value[0] >= 0 && this.value[1] >= 0) {
          cityJson.forEach((item, index) => {
            if (item.value === this.value[0]) {
              provinceIndex = index
              return
            }
          })

          if (provinceIndex >= 0) {
            cityJson[provinceIndex].children.forEach((item, index) => {
              if (item.value === this.value[1]) {
                cityIndex = index
              }
            })
          }

          if (provinceIndex >= 0 && cityIndex >= 0) {
            this.provinceIndex = provinceIndex
            this.cityIndex = cityIndex
          }
        }

        this.province = cityJson.map((province) => {
          return province.label
        })

        this.city = cityJson[provinceIndex >= 0 ? provinceIndex : 0].children.map((city) => {
          return city.label
        })
      } else {
        let provinceIndex = -1
        if (this.value && this.value.length === 1 && this.value[0] >= 0) {
          this.pickerRange.forEach((item, index) => {
            if (item.value === this.value[0]) {
              provinceIndex = index
              return
            }
          })

          if (provinceIndex >= 0) this.provinceIndex = provinceIndex
        }
      }
    },
    change(e) {
      if (this.type === 'city') {
        this.provinceIndex = e.detail.value[0]
        this.cityIndex = e.detail.value[1]
        // 返回格式： [省份value, 市县value]
        this.$emit('change', [cityJson[this.provinceIndex].value, cityJson[this.provinceIndex].children[this.cityIndex].value])
      } else {
        this.provinceIndex = e.detail.value
        this.$emit('change', this.pickerRange[this.provinceIndex])
      }
    },
    columnchange(e) {
      if (e.detail.column === 0) {
        this.city = cityJson[e.detail.value].children.map((city) => {
          return city.label
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
